<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:body>
        <ui:composition template="./../template/main.xhtml">
            <ui:define name="content">
                 <h1 class="title ui-widget-header ui-corner-all ">Quản Lý Kho Hàng</h1>
                <h:form id="inventoryForm">
                    <p:panel header="Tìm kiếm" style="margin-bottom: 20px; width: 400px">
                        <h:panelGrid styleClass="my-panel-grid" columns="2">
                            <p:outputLabel value="Cửa hàng:"/>
                            <p:selectOneMenu value="#{phoneCodeStoreController.selectedStore.id}" filter="true" filterMatchMode="startsWith">
                                <f:selectItem itemValue="#{0}" itemLabel="Tất cả"/>
                                <f:selectItems value="#{phoneCodeStoreController.storeList}" var="storeList"
                                               itemValue="#{storeList.id}" itemLabel="#{storeList.name}"/>
                            </p:selectOneMenu>
                            
                            <p:outputLabel value="Số lượng (tối đa):"/>
                            <p:spinner value="#{phoneCodeStoreController.selectedQuantity}" min="0" stepFactor="1"/>

                            <p:commandButton id="searchButton" update=":inventoryForm:inventoryDataTable" actionListener="#{phoneCodeStoreController.search()}" icon="ui-icon" value="Tìm"/>
                        </h:panelGrid>
                    </p:panel>
                    <p:dataTable style="text-align: center" id="inventoryDataTable" var="inventory" value="#{phoneCodeStoreController.phoneCodeStoreList}" paginator="true" rows="10" paginatorPosition="bottom"
                                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" 
                                 emptyMessage="Không có sản phẩm">
                        <!-- Store -->
                        <p:column headerText="Cửa hàng" style="width: 40%">
                            <p:outputLabel value="#{inventory.store.name}"/>
                        </p:column>
                        <!-- Product -->
                        <p:column headerText="Sản phẩm" style="width: 30%">
                            <p:outputLabel value="#{inventory.phoneCode.phone.name}"/>
                        </p:column>
                        <!-- Color -->
                        <p:column headerText="Màu" style="width: 15%">
                            <p:outputLabel value="#{inventory.phoneCode.color.name}"/>
                        </p:column>
                        <!-- Quantity -->
                        <p:column headerText="Số lượng" style="width: 15%">
                            <p:outputLabel value="#{inventory.quantity}">
                                <f:convertNumber type="number"/>
                            </p:outputLabel>
                        </p:column>
                    </p:dataTable>
                </h:form>                
            </ui:define>
        </ui:composition>
    </h:body>
</html>